<template>
    <div>
        <a-button type="primary" @click="exportData">导出数据</a-button>
    </div>
</template>

<script setup lang='ts'>
import { utils, writeFile, write } from 'xlsx'
import XlsxStyle from 'xlsx-style';

import FileSaver from 'file-saver'
import { ref } from 'vue'

let tableData = ref([
    {
        name: 'John',
        age: 20,
        gender: 'Male',
        address: {
            city: 'New York',
            state: 'NY',
            zip: '10001'
        }
    },
    {
        name: 'Jane',
        age: 25,
        gender: 'Female',
        address: {
            city: 'Los Angeles',
            state: 'CA',
            zip: '90001'
        }
    },
    {
        name: 'Bob',
        age: 30,
        gender: 'Male',
        address: {
            city: 'Chicago',
            state: 'IL',
            zip: '60601'
        }
    }
])

const exportData = () => {
    const sheet = utils.json_to_sheet(tableData.value)
    const workbook = utils.book_new()
    const merge = [
        { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } },
        { s: { r: 1, c: 0 }, e: { r: 1, c: 3 } },
        { s: { r: 2, c: 0 }, e: { r: 2, c: 3 } }
    ]
    sheet["!merges"] = merge
    sheet["!cols"] = [
        { wpx: 100 },
        { wpx: 100 },
        { wpx: 100 },
        { wpx: 200 }
    ]
    sheet["A1"].s = {
        font: {
            bold: true
        },
        border: {
            top: { style: "thin" },
            bottom: { style: "thin" },
            left: { style: "thin" },
            right: { style: "thin" }
        },
        alignment: {
            horizontal: 'center',
            vertical: 'center'
        }
    }
    sheet["B1"].s = {
        font: {
            bold: true
        },
        border: {
            top: { style: "thin" },
            bottom: { style: "thin" },
            right: { style: 'thin' }
        },
        alignment: {
            horizontal: 'center',
            vertical: 'center'
        }
    }
    sheet["C1"].s = {
        font: {
            bold: true
        },
        border: {
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            right: { style: 'thin' }
        },
        alignment: {
            horizontal: 'center',
            vertical: 'center'
        }
    }
    sheet["D1"].s = {
        font: {
            bold: true
        },
        border: {
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            right: { style: 'thin' },
            left: { style: 'thin' }
        },
        alignment: {
            horizontal: 'center',
            vertical: 'center'
        }
    }
    for (let i = 2; i <= tableData.value.length + 1; i++) {
        sheet[`A${i}`].s = {
            border: {
                left: { style: 'thin' }
            }
        }
        sheet[`D${i}`].s = {
            border: {
                right: { style: 'thin' }
            }
        }
    }
    utils.book_append_sheet(workbook, sheet, 'Sheet1')
    const wbout = XlsxStyle.write(workbook, { bookType: 'xlsx', type: 'binary' })
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    FileSaver.saveAs(blob, 'data.xlsx')
}

function s2ab(s:any) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF
    return buf
}
</script>

<style scoped></style>